import G6 from "@antv/g6/build/g6";
import { uniqueId } from '@/zstp/utils'
// import Shape from '@antv/g/src/shapes'
const circleNode = {
  init() {
    G6.registerNode("circleNode", {
      draw(cfg, group) {
        let size = cfg.size;
        if(!size){
          size=[120]
        }
        // 此处必须是NUMBER 不然bbox不正常
        const radius = (cfg.size / 2)
        const color = cfg.color;
        const mainId = 'rect' + uniqueId()
        const shape = group.addShape('circle', {
            attrs: {
              id: mainId,
              x: 0,
              y: 0,
              r: radius,
              stroke: "#ced4d9",
              fill: '#fff', // 应用节点样式
            }
          });
          group.addShape("circle", {
            attrs: {
              x: 0,
              y: 0,
              r: radius,
              fill: color,
              stroke: "#ced4d9",
              parent: mainId,
            }
          });
        if (cfg.label) {
           group.addShape("text", {
            attrs: {
              id: 'label' + uniqueId(),
              x: 0,
              y: 0,
              textAlign: "center",
              textBaseline: "middle",
              text: cfg.label,
              parent: mainId,
              fill: "#565758"
            }
          });
        }
        if (cfg.inPoints) {
          for (let i = 0; i < cfg.inPoints.length; i++) {
            const id = 'circle' + uniqueId()
            let setX=cfg.inPoints[i][0];
            let setY=cfg.inPoints[i][1];
            group.addShape("circle", {
              attrs: {
                id: 'circle' + uniqueId(),
                parent: id,
                x: radius*setX,
                y: radius*setY,
                r: 10,
                isInPointOut: true,
                isOutPointOut: true,
                fill: "#1890ff",
                opacity: 0
              }
            });
            group.addShape("circle", {
              attrs: {
                id: id,
                x: radius*setX,
                y: radius*setY,
                r: 3,
                isInPoint: true,
                isOutPoint: true,
                fill: "#fff",
                stroke: "#1890ff",
                opacity: 0
              }
            });
          }
        }

        // 添加文本、更多图形
        return shape;
      },
      //设置状态
      setState(name, value, item) {
        const group = item.getContainer();
        const shape = group.get("children")[0]; // 顺序根据 draw 时确定

        const children = group.findAll(g => {
          return g._attrs.parent === shape._attrs.id
        });
        const circles = group.findAll(circle => {
          return circle._attrs.isInPoint || circle._attrs.isOutPoint;
        });
        const selectStyles = () => {
          shape.attr("fill", "#f3f9ff");
          shape.attr("stroke", "#6ab7ff");
          shape.attr("cursor", "move");
          children.forEach(child => {
            child.attr("cursor", "move");
          });
          circles.forEach(circle => {
            circle.attr('opacity', 1)
          })
        };
        const unSelectStyles = () => {
          shape.attr("fill", "#fff");
          shape.attr("stroke", "#ced4d9");
          circles.forEach(circle => {
            circle.attr('opacity', 0)
          })
        };
        switch (name) {
          case "selected":
          case "hover":
            if (value) {
              selectStyles()
            } else {
              unSelectStyles()
            }
            break;
        }
      }
    });
  }
}

export default circleNode
